<template>
  <div class="tag">
    <el-card class="box-card">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../assets/biaoqian.png" />
        <span>{{ $t("tag.tag") }}</span>
      </div>
      <div class="text item">
        <el-tag
          size="mini"
          class="tag-item"
          @click="tag('Java')"
          v-for="item in tableData"
          :key="item.id"
        >
          {{ item.tname }}[{{ item.num }}]
        </el-tag>
      </div>
    </el-card>
  </div>
</template>

<script>
const colors = [
  "#ff9ff3",
  "#feca57",
  "#ff6b6b",
  "#48dbfb",
  "#1dd1a1",
  "#00d2d3",
  "#54a0ff",
  "#5f27cd",
  "#8395a7",
  "#576574",
  "#01a3a4",
  "#10ac84",
  "#833471",
];
export default {
  name: "tag",
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.show();
  },
  methods: {
    tag(name) {
      this.$router.push({
        name: "tag",
        params: {
          name: name,
        },
      });
    },
    async show() {
      const _this = this;
      this.$axios
        .get("http://121.43.152.1:8081/queryAllTag")
        .then(function (res) {
          const { code, data } = res.data;
          code === 0 && (_this.tableData = data);
        });
    },
  },
};
</script>

<style scoped>
.box-card .item:hover {
  color: #409eff;
  cursor: pointer;
}

.box-card span {
  font-weight: bold;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.tag-item {
  margin-right: 10px;
}
.tag {
  margin-bottom: 30px;
}
</style>